<template>
	<view class="fl-s-s">
		<view class="w-1" style="position: sticky; left: 0; top: 0; z-index: 999;">
			<view style="background: #fff; height: 36px;">
				<!-- <image src="/static/images/classify/claiffy_bg.png" class="common_bg"></image> -->
				<!-- <view class="status_bar"></view> -->
				<!-- <view class="w-1 p-r-30 fr-b-c" style="height: 44px;"></view> -->
				<!-- <image src="/static/images/classify/claiffy_bg.png" class="w-1 absolute-0" style="height: 280rpx;">
				</image> -->
				<view class="search-box fr-b-c" style="padding-left: 36rpx; padding-right: 6rpx;">
					<image src="/static/images/user/search_icon.png" style="width: 34rpx; height: 34rpx;"></image>
					<!-- @confirm="getClassify" -->
					<input type="text"  placeholder-style="color: #CCCCCC;"  v-model="search_keys" confirm-type="search"
						 class="flex-1 s-input" placeholder="输入想找的商品~" />
					<u-icon name="close-circle-fill" class="close-circle-fill" color="#cdcdcd" @tap="close_input" v-show="search_keys"></u-icon>
					<view class="fr-c search-btn" @tap="search">搜索</view>
				</view>
			</view>
		</view>
		<view class="cart-list">
			<view class="cart-list w-1 relative m-t-30">
				<!-- <view class="" v-for="(items,indexs) in list"> -->
				<view class="list-item fr-s-c w-1 m-b-20" v-for="(item, index) in list" :key="index">
					<view class="fl-c h-1" style="width: 84rpx" @click="changeChooseSign(index)">
						<image
							:src="item.toggle ? '/static/images/shopcar/color_selected.png' : '/static/images/shopcar/noc_not_select.png'"
							style="width: 36rpx; height: 36rpx"
						></image>
					</view>
					<view class="flex-1 h-1">
						<view class="list-item-top">
							<view class="">
								{{ item.order_no }}
							</view>
							<view class="">
								{{ item.createtime_text }}
							</view>
						</view>
						<view class="fr-s-c">
							<image :src="item.image" mode="aspectFill" style="width: 116rpx; height: 116rpx; border-radius: 12rpx" v-if="item.platform == 1"></image>
							<image :src="baseUrl.cdnurl + item.image" mode="aspectFill" style="width: 116rpx; height: 116rpx; border-radius: 12rpx" v-else></image>
							<view class="m-l-20 flex-1 fl-b-s" style="padding: 16rpx 0">
								<text class="text-line-1 c-00 fs-30 fm-ali">{{ item.title }}</text>
								<view class="fr-b-e w-1 margin20">
									<!-- 价格 -->
									<view class="fr-s-c fm-ali" style="color: #fa360a; align-items: baseline">
										<text class="fs-24">￥</text>
										<text class="fs-36">{{ item.skus[0].price}}</text>
										<!-- <text class="fs-20">.00</text> -->
									</view>
									<!-- 修改数量 -->
									<!-- @plus="plusNum" -->
									<!-- <u-number-box v-model="item.num" :min="1" :index="index" bg-color="transparent" @change="valChange" ></u-number-box> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</view>
		<view v-if="list.length" class="fr-c-s w-1 jiesuan">
			<view class="column-foot p-r-30 fr-b-c m-t-20">
				<view class="fr-s-c" @click="changeChooseAll">
					<image :src="chooseAll ? '/static/images/shopcar/color_selected.png' : '/static/images/shopcar/noc_not_select.png'" style="width: 36rpx; height: 36rpx"></image>
					<text class="c-99 fs-30 fm-ali m-l-10">全选</text>
				</view>
				<view class="fr-s-c chat_bottom">
					已选择
					<text class="chat_num">{{ num }}</text>
					件,
					<text class="fs-24 c-66 fm-ali">合计</text>
					<view class="fr-s-c fm-ali" style="color: #fa360a; align-items: baseline">
						<text class="fs-24">￥</text>
						<text class="fs-36">{{ account }}</text>
					</view>
					<view class="fr-c js-btn m-l-30" @click="toSub">选择</view>
				</view>
			</view>
		</view>
		<view class="m-t-250 w-1" v-if="nodata">
			<u-empty mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
import config from '@/utils/base.js';
export default {
	data() {
		return {
			value: 1,
			isEdit: false,
			chooseAll: false,
			list: [],
			nodata: true,
			active_list: [],
			baseUrl: config,
			page: 1,
			count: '',
			search_keys:'',
		};
	},
	// watch: {
	// 	list: {
	// 		deep: true, //true为进行深度监听,false为不进行深度监听
	// 		handler(newVal) {
	// 			this.chooseAll = newVal.every(item => {
	// 				item.order_item.every(item1=> item.toggle)
	// 			})
	// 		}
	// 	}
	// },
	onLoad() {},
	onShow() {
		this.getList();
	},

	computed: {
		// 合计
		account() {
			let total = 0;
			this.list
				.filter((item1) => item1.toggle)
				.map((i) => {
					total += 1 * i.price;
				});
			return total.toFixed(2);
		},
		num() {
			let num = 0;
			// for(let item of this.list){
			this.list
				.filter((item1) => item1.toggle)
				.map((i) => {
					num++;
				});
			// }
			return num;
		}
	},
	onReachBottom() {
		if (this.list.length < this.count) {
			this.page++;
			this.getList();
		}
	},
	methods: {
		close_input(){
			this.search_keys = ''
			this.getList();
		},
		search(){
			this.getList();
		},
		// 获取商品列表
		getList(cate_id) {
			this.$get({
				url: '/wanlshop/product/lists_new',
				data: {
					sort: 'weigh',
					order: 'asc',
					type: 'goods',
					page: this.page,
					from: 'gift',
					search:this.search_keys,
				}
			})
				.then((res) => {
					for (let i in res.data.data) {
						res.data.data.toggle = false;
					}
					this.list = this.page == 1 ? res.data.data : [...this.list, ...res.data.data];
					this.nodata = !this.list.length;
					this.count = res.data.total;
				})
				.catch((err) => {
					this.list = [];
					this.nodata = !this.list.length;
					this.count = 0;
				});
		},
		// 删除购物车数据
		delGoods() {
			uni.showModal({
				title: '提示',
				content: '确定删除选中商品吗？',
				success: (res) => {
					if (res.confirm) {
						let list = this.list;
						list = list.filter((item) => item.toggle).map((items) => (items = items.id));
						this.$get({
							url: '/mainwxapp/doPageDelGwcs',
							data: {
								gwc_ids: list.join(',')
							}
						}).then((res) => {
							this.list = this.list.filter((item) => !list.includes(item.id));
							this.nodata = !this.list.length;
							if (!this.list.length) {
								this.isEdit = false;
							}
						});
					}
				}
			});
		},
		plusNum(e) {
			console.log(e, '111');
		},
		valChange(e) {
			const { value, index } = e;
			console.log(this.list[index].num);
			this.updataGnum(index);
		},
		// 修改购物车数量
		updataGnum(index) {
			let id = this.list[index].id;
			let num = this.list[index].num;
			this.$get({
				url: '/Wxapps/doPageduogwcchange',
				data: {
					id,
					num
				}
			});
		},
		changeEdit() {
			this.isEdit = !this.isEdit;
		},
		getChooseAll() {
			let isall = true;
			for (let item of this.list) {
				if (!item.toggle) {
					isall = false;
				}
			}
			this.chooseAll = isall;
		},
		// 单选
		changeChooseSign(index) {
			this.$set(this.list[index], 'toggle', !this.list[index].toggle);
			this.get_active_num();
			this.getChooseAll();
		},
		// 多选
		changeChooseAll() {
			this.chooseAll = !this.chooseAll;
			for (let item of this.list) {
				item.toggle = this.chooseAll;
			}

			this.get_active_num();
		},
		get_active_num() {
			this.active_list = [];
			for (let item of this.list) {
				if (item.toggle == true) {
					console.log(item.shop_id)
					let data = {
						image: item.image,
						price: item.price,
						title: item.title,
						goods_id: item.id,
						platform:item.platform,
						shop_id:item.shop_id,
						sku_id:item.skus[0].id,
					};
					this.active_list.push(data);
				}
			}
		},
		// 去下单页
		toSub() {
			if (this.active_list.length <= 0) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				});
				return false;
			}
			uni.$emit('jiuwulistwdd', this.active_list);
			uni.navigateBack();
		}
	}
};
</script>

<style>
	.close-circle-fill{
		margin-right: 12rpx;
	}
	.s-input {
		font-size: 26rpx;
		font-family: Alibaba;
		color: #333333;
		margin-left: 6rpx;
		padding-left: 12rpx;
	}
	.search-box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #FA360A;
		margin: auto;
	}
	.search-btn {
		width: 142rpx;
		height: 70rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		border-radius: 35rpx;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		position: relative;
		left: 6rpx;;
	}
page {
	background-color: #fff;
	padding-bottom: 220rpx;
}

.cart-list {
	width: 100%;
}

>>> .u-numberbox {
	border: 2rpx solid #eeeeee !important;
	width: 130rpx !important;
	height: 42rpx !important;
	border-radius: 6rpx !important;
	font-family: Alibaba !important;
}

>>> .u-number-input {
	font-family: Alibaba;
	font-size: 22rpx;
	color: #000000;
	width: 46rpx !important;
	height: 42rpx !important;
	margin: 0 !important;
	border: none;
	border-radius: 0;
	border-left: 2rpx solid #eeeeee;
	border-right: 2rpx solid #eeeeee;
}

>>> .u-icon-minus {
	width: 42rpx !important;
	height: 42rpx !important;
	color: #c0c0c0 !important;
}

>>> .u-icon-plus {
	width: 42rpx !important;
	height: 42rpx !important;
	color: #c0c0c0 !important;
}

.common_bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 284rpx;
}

.list-item {
	width: 100%;
	height: 220rpx;
	background: #ffffff;
	border-radius: 10rpx;
	padding: 28rpx 48rpx;
	padding-left: 0;
	border-bottom: #f4f4f4 solid 2rpx;
}

.column-foot {
	width: 100%;
	height: 104rpx;
	background: #ffffff;
	border-radius: 16rpx;
}

.js-btn {
	width: 104rpx;
	height: 66rpx;
	background: linear-gradient(270deg, #e46c30 0%, #e32c1c 100%);
	/* box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58); */
	border-radius: 34rpx;
	font-size: 24rpx;
	font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #ffffff;
}

.jiesuan {
	width: 100%;
	height: 184rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	box-shadow: 0rpx -8rpx 14rpx 0rpx rgba(0, 0, 0, 0.06);
	border-bottom: 2rpx solid #f4f4f4;
}

.chat_bottom {
	font-size: 24rpx;
	font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #333333;
}

.chat_num {
	color: #e32d1d;
}

.margin20 {
	margin-top: 20rpx;
}

.list-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-item-top-img {
	width: 30rpx;
	height: 30rpx;
	background-color: #ddd;
	border-radius: 50%;
	margin-right: 6rpx;
}

.text-line-1 {
	display: -webkit-box;
	word-break: break-all;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
</style>
